<template>
  <div style="text-align: left">
    <!--搜索公司-->
    <el-row style="margin-bottom: 20px">
      <el-col style="text-align: left" :span="12">
        <el-button type="primary"  size="mini" icon="el-icon-magic-stick" @click="openCheckTopic">查重</el-button>
      </el-col>
      <el-col style="text-align: right" :span="12">
        <el-button type="primary"  size="mini" icon="el-icon-plus" @click="openSetTopic">录入题库</el-button>
        <el-button type="primary"  size="mini" icon="el-icon-delete" @click="openDelTopic">删除题库</el-button>
      </el-col>
    </el-row>
    <el-form :model="addForm" :rules="addFormRules" :inline="true" ref="addForm" label-width="60px"
             class="demo-ruleForm">
      <el-form-item label="名称" prop="name">
        <el-input  :disabled="startStatus" type="text" v-model="addForm.name" placeholder="请输入试卷名称"></el-input>
      </el-form-item>
      <el-form-item label="工种" prop="workType">
        <el-input  :disabled="startStatus" type="text" v-model="addForm.workType" placeholder="请输入工种"></el-input>
      </el-form-item>
      <el-form-item label="等级" prop="evaluationLevel">
        <el-select :disabled="startStatus" v-model="addForm.evaluationLevel" placeholder="请选择评价等级">
          <el-option v-for="it in levelOptions" :key="it.value" :label="it.label" :value="it.value"/>
        </el-select>
      </el-form-item>
      <el-button :disabled="startStatus" @click="start">确定</el-button>
      <el-button @click="startCancle">取消</el-button>

      <div class="type-list-box">
        <div v-for="(item, index) in addForm.typeList" :key="index">
          <el-form-item  label="试题属性" prop="item.questionAttribute">
            <el-select size="small"  v-model="item.questionAttribute" placeholder="请输入试题属性">
              <el-option key="Z" label="知识型" value="Z"/>
              <el-option key="J" label="技能型" value="J"/>
            </el-select>
          </el-form-item>
          <el-form-item label="题型" prop="item.questionType">
            <el-select filterable size="small"  v-model="item.questionType" placeholder="请选择题型">
              <el-option v-for="to in topicOptions" :key="to.value" :label="to.label" :value="to.value"/>
            </el-select>
          </el-form-item>
          <el-form-item label="难易层度" prop="item.difficultyLevel">
            <el-select size="small"  v-model="item.difficultyLevel" placeholder="请选择难易层度">
              <el-option v-for="to in difficultyOptions" :key="to.value" :label="to.label" :value="to.value"/>
            </el-select>
          </el-form-item>
          <el-form-item label="数量" prop="item.num">
            <el-input-number size="mini" v-model.number="item.num"  placeholder="请输入数量"></el-input-number>
          </el-form-item>
          <el-button size="mini" type="primary" icon="el-icon-search"  @click="queryNum(item)">搜索数量</el-button>
          <el-button style="margin-top: 6px" size="mini" type="danger" icon="el-icon-delete" @click="delType(item)"></el-button>
        </div>
      </div>
    </el-form>

    <div style="height: 30px"></div>
  <el-button :disabled="!startStatus" type="primary" @click="addType">添加试题</el-button>
  <el-button :disabled="!startStatus" type="primary" @click="outTopic">出题</el-button>

  </div>
</template>

<script>
import {Notification} from 'element-ui';
import {checkTopic, delTopic, getSelectTopicNum, getTopics, isTopic, IsTopic, setTopic} from "@/api/all";
export default {
  data() {
    return {
      //开启状态
      startStatus: false,
      addFromDialog : false,
      //难易程度  有难 易 中
      difficultyOptions:[
        {
          value: '难',
          label: '难',
        },
        {
          value: '易',
          label: '易',
        },
        {
          value: '中',
          label: '中',
        }
      ],
      topicOptions: [{
        value: '单选题',
        label: '单选题',
      },{
        value: '多选题',
        label: '多选题',
      },{
        value: '简答题',
        label: '简答题',
      },{
        value: '判断题',
        label: '判断题',
      },{
        value: '计算题',
        label: '计算题',
      },{
        value: '案例题',
        label: '案例题',
      }],
      levelOptions: [{
        value: '初级工',
        label: '初级工',
      },{
        value: '中级工',
        label: '中级工',
      },{
        value: '高级工',
        label: '高级工',
      },{
        value: '技师',
        label: '技师',
      },{
        value: '高级技师',
        label: '高级技师',
      }],
      typeJson:{
        "num": null,
        "questionType": null,
        "questionAttribute": null,
        "difficultyLevel": null
      },
      addForm: {
        name: '',
        workType: '',
        evaluationLevel: '',
        typeList: [
        ],
      },
      addFormRules: {
        name: [
          {required: true, message: '请输入试卷名称', trigger: 'blur'},
          {max: 50, message: '产品名称长度不能超过50个字符', trigger: 'blur'}
        ],
        workType: [
          {required: true, message: '请输入工种', trigger: 'blur'},
          {max: 50, message: '型号规格长度不能超过50个字符', trigger: 'blur'}
        ],
        qualityLevel: [
          {required: true, message: '请输入评价等级', trigger: 'blur'},
          {max: 50, message: '型号规格长度不能超过50个字符', trigger: 'blur'}
        ],
        questionAttribute: [
          {required: true, message: '请输入试题属性', trigger: 'blur'},
          {max: 50, message: '试题属性长度不能超过50个字符', trigger: 'blur'}
        ],
        questionType: [
          {required: true, message: '请输入题型', trigger: 'blur'},
        ],
        difficultyLevel: [
          {required: true, message: '请输入难易程度', trigger: 'blur'},
        ],
        num: [
          {required: true, message: '请输入数量', trigger: 'blur'},
        ]
      },
    }
  },
  created() {

  },
  methods: {
    //查重
    openCheckTopic(){
      this.$prompt('请输入文件全地址', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({ value }) => {
        const loading = this.$loading({
          lock: true,
          text: '正在查重中，请稍等...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.9)'
        });
        checkTopic(value).then(response => {
          if (response.code === 2000) {
            loading.close();
            Notification({
              title: '成功',
              message: '导出成功！！',
              type: 'success'
            });
          }
        }).finally(() => {
          loading.close();
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    },
    //删除试题
    openDelTopic(){
      this.$confirm('此操作将永久删除该题库, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delTopic().then(response => {
          if (response.code === 2000) {
            Notification({
              title: '成功',
              message: '删除成功！！',
              type: 'success'
            });
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //添加试题
    openSetTopic(){
      this.$prompt('请输入文件全地址', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({ value }) => {
        const loading = this.$loading({
          lock: true,
          text: '正在导入中，请稍等...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.9)'
        });
        setTopic(value).then(response => {
          if (response.code === 2000) {
            loading.close();
            Notification({
              title: '成功',
              message: '导入成功！',
              type: 'success'
            });
          }
        }).finally(() => {
          loading.close();
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    },
    //查询数量
    queryNum(row){
      let params = {
        workType: this.addForm.workType,
        evaluationLevel:  this.addForm.evaluationLevel,
        typeList: {
          difficultyLevel: row.difficultyLevel,
          questionAttribute : row.questionAttribute,
          questionType : row.questionType
        },
      }
      //判断typeList每个值是否为空
      if (params.typeList.difficultyLevel == null || params.typeList.difficultyLevel == '') {
        this.$message({
          message: '难易程度不能为空',
          type: 'warning'
        });
        return
      }
      if (params.typeList.questionAttribute == null || params.typeList.questionAttribute == '') {
        this.$message({
          message: '题目属性不能为空',
          type: 'warning'
        });
        return
      }
      if (params.typeList.questionType == null || params.typeList.questionType == '') {
        this.$message({
          message: '题目类型不能为空',
          type: 'warning'
        });
        return
      }
      console.log(params)
      getSelectTopicNum(params).then(response => {
        if (response.code === 2000) {
          this.$message.success("题目属性为【"+row.questionAttribute+"】，题目类型为【"+row.questionType+"】，难易程度为【"+row.difficultyLevel+"】的题目数量为"+response.data)
        }
      });

    },
    delType(item){
      this.addForm.typeList.splice(this.addForm.typeList.indexOf(item),1)
    },
    start(){
      this.addForm.typeList = []
      //判断是否有数据为空
      if (this.addForm.name == null || this.addForm.name == '') {
        this.$message({
          message: '试卷名称不能为空',
          type: 'warning'
        });
        return
      }
      if (this.addForm.workType == null || this.addForm.workType == '') {
        this.$message({
          message: '工种不能为空',
          type: 'warning'
        });
        return
      }
      if (this.addForm.evaluationLevel == null || this.addForm.evaluationLevel == '') {
        this.$message({
          message: '评价等级不能为空',
          type: 'warning'
        });
        return
      }
      isTopic(this.addForm.workType,this.addForm.evaluationLevel).then(response => {
        if (response.code === 2000) {
          this.$message.success("该类型总题数："+response.data)
          this.addForm.typeList.push(JSON.parse(JSON.stringify(this.typeJson)))
          this.startStatus = true
          console.log(this.addForm)
        }
      });
    },
    startCancle(){
      this.addForm.typeList = []
      this.startStatus = false
    },
    outTopic(){
      console.log(this.addForm)
      //遍历this.addForm.typeList每个值是否为空
      for (let i = 0; i < this.addForm.typeList.length; i++) {
        if (this.addForm.typeList[i].num == null || this.addForm.typeList[i].num == '') {
          this.$message({
            message: '数量不能为空',
            type: 'warning'
          });
          return
        }
        if (this.addForm.typeList[i].questionAttribute == null || this.addForm.typeList[i].questionAttribute == '') {
          this.$message({
            message: '题目属性不能为空',
            type: 'warning'
          });
          return
        }
        if (this.addForm.typeList[i].questionType == null || this.addForm.typeList[i].questionType == '') {
          this.$message({
            message: '题目类型不能为空',
            type: 'warning'
          });
          return
        }
        if (this.addForm.typeList[i].difficultyLevel == null || this.addForm.typeList[i].difficultyLevel == '') {
          this.$message({
            message: '难易程度不能为空',
            type: 'warning'
          });
          return
        }
      }
      //转成jsonString
      this.getTopic(this.addForm)
    },
    addType(){
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          this.addForm.typeList.push(JSON.parse(JSON.stringify(this.typeJson)))
        } else {
          // 数据不完整，不允许提交的处理
          Notification({
            title: '提示',
            message:"请完善数据",
            type: 'warning',
          });
        }
      });

    },
    getTopic(data) {
      getTopics(data).then((response) => {
        if (response.code === 2000) {
          this.$message.success("导出成功")
        }
      });
    },
  }
}
</script>

<style>
.el-card__header {
  padding: 5px 15px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.like {
  cursor: pointer;
  font-size: 25px;
  display: inline-block;
}

.docWrap {

width: 900px;
  overflow-x: auto;
}
.type-list-box{
  width: 100%;
  height: 100%;
  overflow: auto;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
</style>